export default function App (props) {
    const { todos, CheckAllTodo, clearDoneTodos } = props
    // 已完成
    const doneCount = todos.reduce((prev,cur) => {
        return prev+ (cur.completed ? 1 : 0)
    }, 0)
    // 全部
    const total = todos.length;
    return (
        <div className="todo-footer">
            <input className="toggle" type="checkbox" checked = { doneCount === total && total !== 0 ? true: false} onChange= { (e) => CheckAllTodo(e) } />
            <span className="tip">
              <span>已完成{doneCount}</span> /全部{total}
            </span>
            <button className='btn-danger' onClick={ clearDoneTodos }>清除已完成任务</button>
        </div>
    )
}